<template>
  <div
    class="input h-auto"
    contenteditable
    v-text="modelValue"
    @input="onInput"
  ></div>
</template>
<script setup lang="ts">
interface Props {
  modelValue?: string;
}
defineProps<Props>();

const emit = defineEmits<{
  "update:modelValue": [value: string];
}>();

const onInput = (e: Event) => {
  const target = e.target as HTMLDivElement;
  emit("update:modelValue", target.innerText);
};
</script>
<style>
div[contenteditable]:empty:not(:focus)::before {
  content: attr(placeholder);
  /* color: hsl(var(--nc)); */
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
</style>
